<template>
  <div class="wrapper">
    <div class="container">
      <!--      <div style="margin: 10px 0">
              <a-breadcrumb>
                <a-breadcrumb-item><a href="/course">课程学习</a></a-breadcrumb-item>
                <a-breadcrumb-item>课程列表</a-breadcrumb-item>
              </a-breadcrumb>
            </div>-->
      <!-- 课程筛选栏-->
      <SearchBar @courseNameChange="courseNameChange" @orderBySelect="orderBySelect"
                 @categoryChange="categoryChange" :category-ids="categoryIds" />
      <!-- 课程展示容器 -->
      <div class="goods-box">
        <!-- 课程列表 -->
        <div class="goods-list-box">
          <EmptyData v-if="goodsList.length === 0" />
          <!-- 列表 -->
          <div class="goods-list gapClass" v-else>
            <template v-for="(item, index) in goodsList" :key="index">
              <CourseCard :item="item" />
            </template>
          </div>
        </div>
      </div>
      <div class="goods-page">
        <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
                    @change-page="changePage" style="margin: 10px 0" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import Pagination from "@/components/Pagination.vue";
import { useRoute, useRouter } from "vue-router";
import EmptyData from "@/components/public/EmptyData.vue";
import { apiGetCourseList, apiGetMyCollect, apiGetMyFootPrint } from "@/api/course";
import SearchBar from "@/components/course/SearchBar.vue";
import CourseCard from "@/components/course/index/CourseCard.vue";

const router = useRouter();

const route = useRoute();
const categoryId: any = route.query.categoryId;
const searchType: any = route.params?.searchType ?? 1;

const categoryIds = ref<any>(categoryId);
const goodsList = ref<any>([]); // 课程列表
const loading = ref<boolean>(false); // 加载状态
const total = ref<any>(0); // 列表总数
const pageInfo = reactive({
  // 请求参数
  pageNo: 1,
  pageSize: 20,
  categoryId: "",
  name: "",
  orderByType: ""
});

onMounted(() => {
  if (categoryId) {
    let cateId = categoryId.split(",");
    pageInfo.categoryId = cateId[cateId.length - 1];
  }
  getCourseList();
});

// 获取课程列表
async function getCourseList() {
  loading.value = true;
  try {
    goodsList.value = [];
    let res: any = {};
    if (searchType == 1) {
      res = await apiGetCourseList(pageInfo);
    } else if (searchType == 2) {
      res = await apiGetMyCollect(pageInfo);
    } else if (searchType == 3) {
      res = await apiGetMyFootPrint(pageInfo);
    }
    goodsList.value = res.result.records;
    total.value = res.result.total;
  } finally {
    loading.value = false;
  }
}

function changePage(pageNo) {
  pageInfo.pageNo = pageNo;
  getCourseList();
}

function orderBySelect(data) {
  pageInfo.orderByType = data;
  getCourseList();
}

function courseNameChange(courseName) {
  pageInfo.name = courseName;
  getCourseList();
}

function categoryChange(value) {
  pageInfo.categoryId = value?.length > 0 ? value[value.length - 1] : "";
  categoryIds.value = value?.length > 0 ? value.join(",") : "";
  getCourseList();
}
</script>

<style scoped lang="scss">
@import "@/assets/style/goodsList.scss";

.container {
  margin: 10px auto;
  width: 1184px;
  position: relative;
}

.goods-box {
  display: flex;
  margin-top: 20px;
}

.goods-list-box {
  width: 100%;
}

.wrapper {
  min-height: 89vh;
}

.gapClass {
  gap: 0 28px
}

.goods-show-info {
  border-radius: 8px 8px 8px 8px;
}

:deep(.ant-breadcrumb) {
  font-size: 16px;
}
</style>
